<template>
  <div>
    <!-- 登录头部 -->
    <div class="login">
      <div class="login-header">
        <img :src="loginpic">
      </div>
    </div>
    <!-- 登录主体 -->
    <div class="login-box">
      <div class="login-right">
        <div class="login-zh">
          <a :class="{ 'toggleLoginType':isInputLogin }" @click="onInputLogionCLicked">账号登录</a>
          <a :class="{ 'toggleLoginType':isCodeLogin }" @click="onCodeLoginClicked">扫码登录</a>
        </div>
        <div id="inputLogin" v-if="isInputLogin">
          <input class="email" type="text" placeholder="邮箱/手机号码/小米ID" ref="usernameInput" v-model="userinfo.username">
          <input class="upwd" type="password" placeholder="密码" ref="userpwdInput" v-model="userinfo.upwd">
          <button type="button" @click="onLoginButtonClicked">登录</button>
          <ul class="login-zc">
            <li class="f-l login-dx">
              <a href="#">手机短信登录/注册</a>
            </li>
            <li class="f-r login-upwd">
              <a href="#">忘记密码?</a>
            </li>
            <li class="f-r login-lj">
              <a href="#">立即注册</a>
            </li>
          </ul>
          <fieldset class="clear">
            <legend>其他登录方式</legend>
          </fieldset>
          <ul class="login-tp">
            <li>
              <a href="#"><img src="../assets/img/qq.png" alt=""></a>
            </li>
            <li>
              <a href="#"><img src="../assets/img/wb.png" alt=""></a>
            </li>
            <li>
              <a href="#"><img src="../assets/img/wx.png" alt=""></a>
            </li>
            <li>
              <a href="#"><img src="../assets/img/zfb.png" alt=""></a>
            </li>
          </ul>
        </div>
        <div id="codeLogin" v-else>
          <div class="box">
            <img src="../assets/img/erweima.png">
          </div>
        </div>
      </div>
    </div>
    <!-- 登录底部 -->
    <div class="login-footer">
      <ul>
        <li>
          <a href="#">简体</a>|</li>
        <li>
          <a href="#">繁体</a>|</li>
        <li>
          <a href="#">English</a>|</li>
        <li>
          <a href="#">常见问题</a>|</li>
        <li>
          <a href="#">隐私政策</a>
        </li>
        <div class="clear"></div>
      </ul>
      <p class="clear">小米公司版权所有-京ICP备10046444
        <a href="#"><img src="../assets/img/ghs.png" alt=""></a>
        -京公网安备11010802020134号-京ICP证110507号
      </p>
    </div>

  </div>
</template>

<script>
import loginpic from "../assets/img/mistore_logo.png";
import { mapGetters, mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      loginpic: loginpic,
      isInputLogin: true,
      isCodeLogin: false,
      userinfo: {
        username: "",
        upwd: ""
      }
    };
  },
  methods: {
    onCodeLoginClicked() {
      this.isInputLogin = false;
      this.isCodeLogin = true;
    },
    onInputLogionCLicked() {
      this.isInputLogin = true;
      this.isCodeLogin = false;
    },
    onLoginButtonClicked() {
      //  alert(this.$refs.usernameInput.value);
      //  alert(this.$refs.userpwdInput.value);
      this.$store.dispatch("onUserLogin", this.userinfo).then((data) => {
          console.log(data.code);
          if(data.code == 200){
            this.$router.push({ path: "/" });
          }else{
            //TODO show error msg
          }
        }).catch((error) => {
          console.log(error);
        });
    }
    // ...mapActions(["onUserLogin"])
  },
  computed: {
    // ...mapGetters("lastlogindate")
  }
};
</script>

<style scoped>
/*login 头部*/
body {
  font-size: 14px;
  font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟正黑體",
    "儷黑 Pro", sans-serif;
}
.login {
  width: 100%;
}
.login-header {
  width: 1130px;
  margin: 0 auto;
  background-color: #fff;
}
/* 登录主体  */
.login-box {
  background: url("../assets/img/bg.jpg") no-repeat center center;
  width: 100%;
  height: 588px;
  position: relative;
}
.login-right {
  width: 368px;
  height: 475px;
  background-color: #fff;
  padding: 21px 21px;
  position: absolute;
  margin-top: 35px;
  margin-left: 1220px;
}
.login-zh a:first-child {
  border-right: 2px solid #e0e0e0;
}
.login-zh a {
  font-size: 24px;
  display: inline-block;
  text-align: center;
  width: 178px;
  /* color: #666; */
}

/* 邮箱/密码input */
.login-right .email,
.upwd {
  width: 306px;
  height: 22px;
  line-height: 22px;
  display: block;
  padding: 10px 16px 10px 14px;
  margin-left: 15px;
  outline: 0;
}
.login-right .email {
  margin-top: 30px;
}
.login-right .upwd {
  margin-top: 15px;
}
/* 登录按钮 */
.login-right button {
  margin-top: 30px;
  display: block;
  width: 340px;
  height: 50px;
  line-height: 50px;
  background-color: #ef5b00;
  font-size: 14px;
  color: #fff;
  border: none;
  margin-left: 15px;
  outline: none;
}
/* 手机短信登录注册 */
.login-zc {
  width: 340px;
  margin-top: 8px;
}
.login-zc a {
  color: #666;
}
.login-dx a {
  color: #ef5b00;
  padding-left: 15px;
}
.login-upwd {
  border-left: 2px solid #666;
  padding-left: 5px;
}
.login-lj {
  padding-right: 5px;
}
fieldset {
  margin-top: 110px;
  border: none;
  border-top: 1px solid #bbb;
  text-align: center;
  width: 325px;
  padding-left: 20px;
  color: #bbb;
}
.login-tp li {
  float: left;
  width: 25%;
  text-align: center;
}
.login-tp {
  width: 350px;
}

/* 登录底部 */
.login-footer {
  text-align: center;
  margin-top: 60px;
}
.login-footer ul li {
  display: inline-block;
  color: #666;
  font-size: 14px;
}
.login-footer p {
  margin-top: 10px;
}
.toggleLoginType {
  color: #ea8459;
}
.box {
  width: 368px;
  height: 475px;
  /* border:1px solid red; */
}
.box img {
  margin-left: 90px;
  margin-top: 100px;
}
</style>
